<template>
        <!-- 精彩评论 -->
        <div class="comment" v-if="comment.length !== 0">
            <ul class="clearfix">
                <li v-for="(item,index) in comment.hotComments" :key="index" class="clearfix">
                    <!-- 头像 -->
                    <div class="touxiang">
                        <img :src="item.user.avatarUrl" alt="">
                    </div>
                    <!-- 用户名 评论内容 -->
                    <div class="content">
                        <div class="name">{{item.user.nickname}}</div>
                        <div class="updateTime">{{format(item.time)}}</div>
                        <div class="con">{{item.content}}</div>
                        <div class="like">
                            <span>{{item.likedCount}}</span>
                            <i class="iconfont icon-dianzan"></i>
                        </div>
                        
                    </div>
                </li>
            </ul>
        </div>
</template>
<script>
import axios from "axios";
export default {
    data:function(){
        return{
            songid:"",
            comment:[]
        }
    },
    created:function(){
        this.songid = this.$parent.$route.query.id;
    },
    mounted:function(){
        var that = this;
        axios.get("http://netease.bluej.cn/comment/playlist?timestamp=1503",{
            params:{
                id:this.songid
            }
        }).then(function(res){
            window.console.log("评论",res);
            that.comment = res.data;
        })
    },
    methods:{
         format:function(time){
            var t = new Date(time);
            var year = t.getFullYear();
            var month = (t.getMonth()+1);
            var day = t.getDate();
            if(month<10){
                month = "0"+month;
            }
            if(day<10){
                day = "0"+day;
            }
            return t = year+"/"+month+"/"+day;
        }
    }
}
</script>
<style scoped lang="scss">
        .comment{
            ul{
                margin-top:3vh;
                li{
                    list-style:none;
                    width:100vw;
                    margin-bottom:3vw;
                    position:relative;
                     border-bottom:1px solid #f6f6f7;
                    .touxiang{
                        float:left;
                        width:10vw;
                        margin:10px;
                        img{
                            display: block;
                            width:100%;
                            height:10vw;
                            border-radius: 50%;
                        }
                    }
                    .content{
                        float:left;
                        width:84vw;
                        .name{
                            line-height:35px;
                            font-size:14px;
                        }
                        .updateTime{
                            font-size:14px;
                            line-height:30px;
                        }
                        .con{
                            font-size:14px;
                            line-height:30px;
                            padding-right:10px;
                        }
                        .like{
                            position: absolute;
                            top:2vw;
                            right:5vw;
                            color:#d8524a;
                            span{
                                font-size:14px;
                            }
                        }
                    }
                }
            }
        }
</style>